<template>
  <section class="chart-box">
    <div v-if="!nodata" :id="id" ref="lineChart" class="line-chart-box" />
    <div v-else class="no-data">
      <img src="@/assets/img/nodata/line_nodata.png" alt>
      <div class="nodata-text flex align-center justify-center" style="color: #999">
        {{ $t('NO_DATA') }}
      </div>
    </div>
    <div
      v-if="showEventInfo"
      class="event-info"
      :style="eventStyle"
      @mouseleave="showEventInfo = false"
    >
      <div>{{ activeEvent.eventName }}</div>
      <div>{{ $t('EVENT_TYPE') }}：{{ activeEvent.eventTypeName }}</div>
      <div>{{ $t('POSITION') }}：{{ activeEvent.position }}</div>
      <div>{{ $t('EVENT_LOSS') }}：{{ activeEvent.eventLoss }}</div>
      <div>{{ $t('REFLECTION_LOSS') }}：{{ activeEvent.refractRate }}</div>
      <div>{{ $t('LINK_LOSSD_B') }}：{{ activeEvent.linkLoss }}</div>
    </div>
  </section>
</template>
<script>
  import { mapGetters } from 'vuex'
  import getThemeColor from '@/utils/themesColor'
  import { changeDecimal } from '@/utils/common'
  import * as echarts from 'echarts'
  import RenderLine from './renderLine'

  export default {
    props: {
      rowList: {
        type: Array,
        default() {
          return []
        }
      },
      id: {
        type: String,
        default: 'line'
      },
      trendshadow: {
        // 判断显示阴影
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        showEventInfo: false,
        activeEvent: {},
        nodata: false,
        colorList: [],
        eventStyle: {},
        observer: null
      }
    },
    computed: {
      ...mapGetters(['dictMap'])
    },
    beforeDestroy() {
      this.distoryChart()
    },
    methods: {
      render() {
        // console.log('this.rowList', this.rowList)
        this.colorList = [
          getThemeColor('colorListColor1'),
          getThemeColor('colorListColor2'),
          getThemeColor('colorListColor3'),
          getThemeColor('colorListColor4')
        ]
        if (this.rowList[0].dataList.length) {
          this.nodata = false
        } else {
          this.nodata = true
          return
        }
        if (this.myChart) {
          this.myChart.clear()
          this.myChart.dispose()
          this.myChart = undefined
        }
        this.myChart = echarts.init(this.$refs.lineChart)
        this.myChart.setOption(
          new RenderLine({
            data: this.formateData()
          })
        )
        window.addEventListener('resize', this.resize)
        const _this = this
        // 添加事件标识点击
        this.myChart.on('click', 'series.line', function(e) {
          _this.eventItemCkick(e)
        })
        this.myChart.on('legendselectchanged', e => {
          // console.log('legendselectchanged', e)
          _this.$emit('legendselectchanged', e.selected)
        })
      },
      // 事件节点点击
      eventItemCkick(e) {
        // console.log(e)
        this.showEventInfo = true
        this.$nextTick(() => {
          const domHeight = document.querySelector('.event-info').offsetHeight
          const top = e.event.offsetY - domHeight
          this.eventStyle = {
            top: (top > 0 ? top : 0) + 5 + 'px',
            left: e.event.offsetX - 5 + 'px'
          }
        })
        const activeEvent = this.rowList[e.seriesIndex].eventList[e.dataIndex]
        const activeRow = this.rowList[e.seriesIndex]
        this.activeEvent = {
          eventName:
            (activeRow.dataName ||
              activeRow.orderIndex + '_' + (activeRow.deviceName || activeRow.deviceId)) +
            ' - ' +
            (e.dataIndex + 1),
          eventTypeName: this.dictMap.OTDR_EVENT_TYPE[activeEvent.eventType],
          position: changeDecimal(activeEvent.position || 0),
          eventLoss: changeDecimal(activeEvent.eventLoss || 0),
          refractRate: changeDecimal(activeEvent.refractRate || 0),
          linkLoss: changeDecimal(activeEvent.linkLoss || 0)
        }
      },
      // 组装图标数据
      formateData() {
        // console.log('this.eventList', this.eventList)
        return this.rowList.map((i, index) =>
          this.getData(
            i.dataList,
            i.dataName || i.orderIndex + '_' + (i.deviceName || i.deviceId),
            index,
            i.eventList
          )
        )
      },
      // 单个线条数据
      getData(_data, _name, _index, eventList) {
        const markPointData = eventList.map((i, eventIndex) => {
          const yData = _data.find(j => Number(j.value[0]) >= Number(i.position))
          // console.log(yData)
          return {
            coord: [Number(i.position), yData ? yData.value[1] : null],
            value: (eventIndex + 1).toString(),
            itemStyle: { color: this.colorList[_index] }
          }
        })
        return {
          type: 'line',
          data: _data,
          markPoint: {
            symbol: 'triangle',
            symbolOffset: [0, '50%'],
            symbolSize: 15,
            label: {
              fontSize: 8,
              offset: [0, 3]
            },
            data: markPointData
          },
          showAllSymbol: true,
          name: _name,
          symbolSize: 0,
          smooth: true,
          itemStyle: {
            color: this.colorList[_index],
            borderWidth: 1
          }
        }
      },
      resize() {
        /* 把这个单独拎出来是因为如果写在
      window.addEventListener("resize", () => { this.myChart.resize()})里面
    当你需要移除这个监听事件的时候，
    这样写window.removeEventListener("resize")是不起作用的，
    而应该这样写
    window.addEventListener("resize", this.resieze)
    和window.removeEventListener('resize', this.resize)才可以正确移除*/
        this.myChart.resize()
      },
      distoryChart() {
        if (this.myChart) {
          window.removeEventListener('resize', this.resize)
          this.myChart.clear()
          this.myChart.dispose()
          this.myChart = undefined
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import 'src/assets/css/mixin.module';
  .chart-box {
    position: relative;
    width: 100%;
    height: 100%;

    & > div {
      width: 100%;
      height: 100%;
    }

    .event-info {
      position: absolute;
      padding: 10px;
      width: auto;
      height: auto;
      z-index: 2;
      border-radius: 8px;

      background: rgba(0, 0, 0, 0.5);
      border: 1px solid #999;
      @include themeify {
        background: themed('mainColor');
        border: 1px solid themed('borderColor');
        color: themed('inputActiveFontColor');
      }
    }
  }
  .no-data {
    position: relative;

    img {
      margin: auto;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  }
</style>
